<template>
  <view class="navbar">
    <su-status-bar v-if="!sheep.$platform.inApp" />
    <view class="navbar-placeholder"></view>
    <view class="navbar-center ss-flex ss-col-bottom " :style="{
      height: sheep.$platform.device.statusBarHeight + 44 + 'px',
      backgroundImage: props.background.img!='none'&&`url(${cdnUrl(props.background.img || theme.background_image)})`,
      background: props.background.BGcolor
    }">
      <!-- <su-status-bar  /> -->
      <view class="center ss-flex-1 ss-flex">
        <view class="ss-flex-1" v-if="messageTitleShow">
          <slot>
          <view class="navbar-title ss-flex ss-row-center" :style="{ color: props.color || theme.title_color }">{{
            props.title.substring(0,props.maxLength) }}
          <span v-if="props.maxLength<=6">..</span>  
          </view>
        </slot>
        </view>
        <view class="navbar-rightBtn ss-flex ss-flex-1 ss-row-between">
          <view class=" ss-flex ss-flex-1 ss-row-between align-center"> 
            <view>
              <slot name="left">
                <view @click="onClickLeft" style="padding:0 20rpx;"><uni-icons type="back" size="20"
                    :color="props.color || theme.title_color"></uni-icons></view>
              </slot>
            </view>
			<view v-if="!messageTitleShow">
			  <slot name="center">
			  </slot>
			</view>
            <view>
              <slot name="right">
              </slot>
            </view>
          </view>
          <!-- #ifdef MP -->
          <view v-if="!sheep.$platform.inPc" :style="[capsuleStyle]"></view>
          <!-- #endif -->
          <view v-if="sheep.$platform.inApp" :style="[capsuleStyle]"></view>
        </view>
        <!-- #ifdef MP -->
        <view v-if="!sheep.$platform.inPc" :style="[capsuleStyle]"></view>
        <!-- #endif -->
        <view v-if="sheep.$platform.inApp" :style="[capsuleStyle]"></view>
      </view>

    </view>
  </view>
</template>

<script setup>
import { computed, reactive } from 'vue';
import { cdnUrl } from '@/association/utils'
import sheep from '@/sheep';
import association from '@/association/store'
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  color: {
    type: String,
    default: '#333',
  },
  background: {
    type: Object,
    default: () => ({
      img: '',
      BGcolor: '#fff'
    }),
  },
  maxLength: {
    type: Number,
    default: 99,
  },
  messageTitleShow:{
	  type:Boolean,
	  default:true
  }
});
const hasHistory = sheep.$router.hasHistory();
const pages= getCurrentPages();
const firstPage = pages[0]?.route;
const theme = computed(() => association().theme)
function onClickLeft() {
  // console.log(hasHistory,'hasHistory');
  if (hasHistory) {
    sheep.$router.back();
  } else {
    if(firstPage==='pages/store/shop'){
      // console.log('123456');
      
      sheep.$router.go('/pages/store/index');
    }
    else{
      sheep.$router.go('/pages/index/home');
    }
  }
}

const capsuleStyle = computed(() => {
  return {
    width: sheep.$platform.capsule.width + 'px',
    minWidth: sheep.$platform.capsule.width + 'px',
    height: sheep.$platform.capsule.height + 'px',
    margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px 0 0',
  };
});
const template = computed(() => sheep.$store('app').template.user);


// onPageScroll(() => { });
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.navbar {
  .navbar-placeholder {
    height: 44px;
  }

  .navbar-center {
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 999;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    background-size: 100% !important;

    .center {
      position: relative;
      height: 44px;
    }

    .navbar-title {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      font-size: 36rpx;
      font-weight: 700;
      color: #fff;
    }

    .navbar-rightBtn {
      color: #fff;
      font-size: 32rpx;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;

      &>view {
        height: 44px;
      }
    }
  }
}
</style>
